<template>
    <div>
        <el-container>
        <el-header>
            <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            >
            <el-menu-item index="/login" @click="changeLogin">登录</el-menu-item>
            <el-menu-item index="/index/function" @click="changeFunction"
                >功能组件</el-menu-item
            >
            <el-menu-item index="/index/product" @click="changeProduct"
                >产品预览</el-menu-item
            >
            <el-menu-item index="/index/application" @click="changeApplication"
                >应用场景</el-menu-item
            >
            <el-menu-item index="/index/home" @click="changeHome"
                >首页</el-menu-item
            >
            </el-menu>
        </el-header>
        <el-main>
          <!-- 可以自定义也可以使用element-ui内置的动画 -->
            <transition name="el-zoom-in-center">
              <router-view></router-view>
            </transition>
        </el-main>
        <el-footer>      
            <div class="footer_container">
              <el-row type="flex" style="padding-top:100px;">
                <el-col :span="6" :offset="6">
                  <span><i class="el-icon-phone-outline"></i>联系方式 ：18234888888</span>
                </el-col>
                <el-col :span="6">
                  <span><i class="el-icon-message"></i>联系邮箱 ：747010136@qq.com</span>
                </el-col>            
              </el-row>
              <el-row type="flex">
                <el-col :span="12" :offset="6">
                  <span><i class="el-icon-location-information"></i>公司地址 : 江苏省徐州市邳州市惠民花园小区幸福之家</span>
                </el-col>
              </el-row>
              <el-row type="flex">
                <el-col :span="12" :offset="6">
                  <span><i class="el-icon-edit-outline"></i>备案号 : 江苏省徐州市邳州市惠民花园小区幸福之家</span>
                </el-col>
              </el-row>    
            </div>
        </el-footer>
        </el-container>
    </div>
</template>

<script>
export default {
    name: "home",
    data() {
        return {
        activeIndex: this.$route.path,
        transitionName: "",
        };
    },
    methods: {
        handleSelect(key, keyPath) {
        this.activeIndex = key;
        // console.log(key);
        },
        changeLogin() {
        this.$router.push("/login");
        },
        changeFunction() {
        this.$router.replace("/index/function");
        },
        changeHome() {
        this.$router.replace("/index/home");
        },
        changeProduct() {
        this.$router.replace("/index/product");
        },
        changeApplication() {
        this.$router.replace("/index/application");
        },
    },
    watch: {
        //使用watch 监听$router的变化
        $route(to, from) {
        this.activeIndex = to.path;
        //如果to索引大于from索引,判断为前进状态,反之则为后退状态
        if (to.meta.index > from.meta.index) {
            //设置动画名称
            this.transitionName = "slide-left";
        } else {
            this.transitionName = "slide-right";
        }
        },
    },
    };
</script>

<style scoped>
.el-header {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 1000;
  opacity: 0.5;
  padding: 0;
}
.el-main {
  padding: 0;
}
.el-footer {
  padding: 0;
}
.el-menu--horizontal > .el-menu-item {
  color: black;
  float: right;
  font-size: 18px;
  font-weight: 700;
  margin-left: 20px;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 3px solid #0dbcff;
}
.el-menu--horizontal > .el-menu-item:hover {
  background: #34466a !important;
  color: #fff !important;
}
/*
v-enter　　进入过渡的开始状态
v-enter-active　　进入活动状态
v-enter-to　　进入的结束状态
v-leave　　离开过渡的开始状态
v-leave-active　　离开活动状态
v-leave-to　　离开结束状态 
 */
.slide-left-enter {
  opacity: 0;
}

.slide-left-leave {
  opacity: 1;
}

.slide-left-enter-active {
  transition: opacity 2s;
}

.slide-left-leave-active {
  opacity: 0;
  transition: opacity 0.5s;
}
.slide-right-enter {
  opacity: 0;
}
.slide-right-leave {
  opacity: 1;
}
.slide-right-enter-active {
  transition: opacity 2s;
}
.slide-right-leave-active {
  opacity: 0;
  transition: opacity 0.5s;
}
.footer_container {
  background: rgb(94, 102, 100);
  font-size: 20px;
  font-weight: 100;
  text-align: center;
  height: 300px;
  color: white;
}
.el-row {
    margin-top: 20px;
}
</style>